<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据集成平台</title>
    {% load static %}
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script src="/static/bootstrap/js/jquery.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <!-- bootstrap-table -->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
    <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
    <style>
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            /*padding: 4px 12px;*/
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            margin-left: 41.66666667%;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            width: 100px;
            height: 100px;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

    </style>
    <!--<script src="/bootstrap-table/dist/bootstrap-table.js"></script>-->
    <!--<script src="/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>-->
</head>
<body>

<!-- 导航栏 -->
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#"></a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li><a href="/home" ><img src="/static/image/logofina.png" alt="" class="img1" height="40" width="100" /></a></li>
                <li><a href="/home" style="font-size:20px">首页</a></li>
                <li><a href="/multiMedia2Text/imageToText" style="font-size:20px">图片转文本</a></li>
                <li><a href="/multiMedia2Text/videoToText" style="font-size:20px">视频转文本</a></li>
                <li><a href="/multiMedia2Text/audioToText" style="font-size:20px">音频转文本</a></li>
                <li><a href="/multiMedia2Text/batch_image_to_text" style="font-size:20px">批量图片转文本</a></li>
                <li><a href="/multiMedia2Text/batch_video_to_text" style="font-size:20px">批量视频转文本</a></li>
                <li><a href="/multiMedia2Text/batch_audio_to_text" style="font-size:20px">批量音频转文本</a></li>
            </ul>
        </div>
    </div>
</nav>
        <a style="margin-left: 35%">图片转文本 </a>
<br />
            <!--主要内容 -->
        {% csrf_token %}
        <a href="javascript:;" class="file col-md-2 btn btn-info">选择文件<input type="file" class="file" name="image_file" id="image_file" multiple/>
        </a>
<br />
<br />
        <button id="uploadImage" class="col-sm-offset-5 col-md-2 btn btn-info" onclick="uploadImage()">进行图片转文本方法</button>
<br />
<br />
        <a style="margin-left: 35%">视频转文本 </a>
<br />
            <!--主要内容 -->
        {% csrf_token %}
        <a href="javascript:;" class="file col-md-2 btn btn-info">选择文件<input type="file" class="file" name="video_file" id="video_file" multiple/>
        </a>
<br />
<br />
            <button id="uploadImage" class="col-sm-offset-5 col-md-2 btn btn-info" onclick="uploadVideo()">进行视频转文本方法</button>
<br />
<br />
        <a style="margin-left: 35%">音频转文本 </a>
<br />
            <!--主要内容 -->
        {% csrf_token %}
        <a href="javascript:;" class="file col-md-2 btn btn-info">选择文件<input type="file" class="file" name="audio_file" id="audio_file" multiple/>
        </a>
<br />
<br />
        <button id="uploadImage" class="col-sm-offset-5 col-md-2 btn btn-info" onclick="uploadAudio()">进行音频转文本方法</button>
<br />
<br />


<br />
<!--<hr />-->
<div id="DST">
<textarea id="dstText" name="dstText" style="width:1400px; height:100px; margin-left: 20px">{{ result }}</textarea>
</div>
</body>

<script>
   function uploadImage(){
        let files = $("#image_file").prop("files");
        let formData = new FormData();
        // 对每个文件进行循环处理
        for (let i = 0; i < files.length; i++) {
            let file = files[i];
            // 添加文件到formData
            formData.append('files['+i+']', file, file.name);
        }
        $.ajax({
            url: "/multiMedia2Text/image2text/",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            async: false,
            cache: false,
            success: function(data) {
                $("#dstText").val(data);
            }
        });
    }
    function uploadVideo(){
        let files = $("#video_file").prop("files");
        let formData = new FormData();
        // 对每个文件进行循环处理
        for (let i = 0; i < files.length; i++) {
            let file = files[i];
            // 添加文件到formData
            formData.append('files['+i+']', file, file.name);
        }
        $.ajax({
            url: "/multiMedia2Text/video2text/",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            async: false,
            cache: false,
            success: function(data) {
                $("#dstText").val(data);
            }
        });
    }
    function uploadAudio(){
        let files = $("#audio_file").prop("files");
        let formData = new FormData();
        // 对每个文件进行循环处理
        for (let i = 0; i < files.length; i++) {
            let file = files[i];
            // 添加文件到formData
            formData.append('files['+i+']', file, file.name);
        }
        $.ajax({
            url: "/multiMedia2Text/audio2text/",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            async: false,
            cache: false,
            success: function(data) {
                $("#dstText").val(data);
            }
        });
    }

</script>

</html>
